<template>
    <div class="front">
        <div class="rec-tabs">
            <van-tabs v-model="active" @click="onTabClick" style="width: 70%;" :line-width="line_width" :swipe-threshold="5">
                <van-tab title="推荐" class="rec-first" style="flex-basis: auto;!important;"></van-tab>
                <div v-for="(item, key) in tagAll" :key="key" v-if="item.isShow != 0">
                    <van-tab :title="item.name" style="flex-basis: auto;!important;"></van-tab>
                </div>
            </van-tabs>
            <div class="rec-icon">
                <div @click="toSearch">
                    <svg class="icon search" aria-hidden="true">
                        <use xlink:href="#icon-fangdajing" />
                    </svg>
                </div>
                <div @click="allRecTab">
                    <svg class="icon down" aria-hidden="true">
                        <use xlink:href="#icon-icon--5" />
                    </svg>
                </div>
            </div>
            <top-pop :show="popShow" :zone-list="tagAll" @changeShow="allRecTab" @changeTab="getMoreGoods"></top-pop>
        </div>
        <div class="front-banner">
            <banner :banner="banner" />
        </div>

        <div class="line"></div>
        <div class="front-rec-brand">
            <div class="brand-all">
                <div class="brand-single" v-for="(brand, key) in frontBrand" :key="key" @click="toOtherSystem(brand)">
                    <img :src="brand.pic" />
                    <div class="brand-name">{{ brand.brandname }}商城</div>
                </div>
            </div>
            <div class="brand-more" v-show="brandShow">
                <div class="brand-single" v-for="(brand, key) in brandsMore" :key="key" @click="toOtherSystem(brand)">
                    <img :src="brand.icon" />
                    <div class="brand-name">{{ brand.name }}商城</div>
                </div>
            </div>
        </div>
        <div class="front-rec-brand mall">
            <div class="brand-all">
                <div class="brand-single" v-for="(part, key) in parts" :key="key" @click="toPart(part)">
                    <img :src="part.pic | imageFmt" />
                    <div class="brand-name">{{ part.name }}</div>
                </div>
            </div>
        </div>
        <div class="front-zhiyou" @click="toPart({ id: 4 })">
            <img :src="'zhiyou' | imageFmt" />
        </div>

        <div class="line"></div>

        <!--分组商品-->
        <div class="front-rec-zone">
            <!--单个分组-->
            <div class="zone-single" v-for="(zone, key) in zoneGoods" :key="key" :id="'id' + zone.id">
                <!--标题+滑动样式-->
                <div class="zone-slide" v-if="zone.style === 'slide'">
                    <div class="slide-title">
                        <see-more :title="zone.name" :has-right="true" @more="getMoreGoods(zone)" />
                    </div>
                    <div class="slide-good">
                        <slide-goods :goods-list="zone.goods" @toDetail="toDetail" @add="toAddCart(zone)" />
                    </div>
                </div>
                <!--标题+列表样式-->
                <div class="zone-list" v-if="['list', ''].includes(zone.style)">
                    <div class="list-title">
                        <see-more :title="zone.name" :has-right="true" @more="getMoreGoods(zone)" />
                    </div>
                    <div class="list-good">
                        <list-goods :goods-list="zone.goods" @toDetail="toDetail" @add="toAddCart" />
                    </div>
                </div>
                <!--图片+滑动样式-->
                <div class="zone-pic-slide" v-if="zone.style === 'pic'">
                    <div class="slide-pic" @click="getMoreGoods(zone)">
                        <img :src="zone.banner" />
                    </div>
                    <div class="pic-good">
                        <slide-goods :goods-list="zone.goods" @toDetail="toDetail" @add="toAddCart" />
                    </div>
                </div>
            </div>
        </div>
        <div class="find-more">
            <!--标题+列表样式-->
            <div class="zone-list">
                <div class="list-title">
                    <see-more title="发现更多" :has-right="false" />
                </div>
                <div class="list-good">
                    <list-goods :goods-list="findMoreList" @toDetail="toDetail" @add="toAddCart" />
                </div>
                <infinite-loading :identifier="infiniteId" @infinite="getMoreList" spinner="circles" v-if="dataCount > 0"></infinite-loading>
            </div>
        </div>
        <product-spec :pro-content="specGood" operation="add" ref="fspec" @chooseDone="specChooseOk" v-if="specGood.key" />
        <group-spec :pro-content="specGood" operation="initiate" ref="gspec" @chooseDone="groupSpecChooseOk" v-if="specGood.key" />
        <van-popup v-model="newBuyData.is_tip" class="activity">
            <div class="im-m">
                <svg class="icon" aria-hidden="true" @click="closeNewBuy">
                    <use xlink:href="#icon-chahao" />
                </svg>
                <img @click="toNewBuy" :src="newBuyData.banner" />
            </div>
        </van-popup>

        <div class="table-icon" @click="$router.push('lottery')" v-if="tableExit">
            <img :src="tableUrl" alt />
            <div>大转盘</div>
        </div>
        <div class="bottom"><a href="http://www.beian.miit.gov.cn">鲁ICP备15044367号-2 </a></div>
    </div>
</template>

<script>
import Banner from '../../components/Online/banner';
import SeeMore from '../../components/Online/see-more';
import SlideGoods from '../../components/Online/slide-goods';
import ListGoods from '../../components/Online/list-goods';
import TopPop from '../../components/Online/top-pop';
import API from '../../request/api';
import { mapActions } from 'vuex';
import { commonMixin, frontMixin, sysMixin } from '@/common/mixin';
import ProductSpec from '../../components/Online/product-spec';
import GroupSpec from '../../components/Online/group-spec';
import { Toast } from 'vant';
import dayjs from 'dayjs';
import wx from 'weixin-js-sdk';
// import {isIOS} from "@/common/utils";

export default {
    mixins: [commonMixin, frontMixin, sysMixin],
    /**
     * 商城首页
     * */
    components: {
        ProductSpec,
        TopPop,
        ListGoods,
        SlideGoods,
        SeeMore,
        Banner,
        GroupSpec
    },
    name: 'front',
    data() {
        return {
            line_width: 28,
            active: 0,
            popShow: false, //所有分组弹窗
            infiniteId: +new Date(), // 该值改变后重新调用handler方法
            pageIndex: 0,
            pageSize: 20,
            dataCount: 0, //获取接口成功数量
            parts: [
                {
                    id: '1',
                    pic: 'zi',
                    name: '自营商品',
                    page: ''
                },
                {
                    id: '2',
                    pic: 'lain',
                    name: '联盟商家',
                    page: ''
                },
                {
                    id: '3',
                    pic: 'tuan',
                    name: '团购',
                    page: ''
                },
                {
                    id: '',
                    pic: 'pin',
                    name: '拼团',
                    page: ''
                }
            ],
            tagAll: [],
            banner: [],
            // brands: [],
            brandsMore: [], //推荐品牌更多列表
            zoneGoods: [],
            findMoreList: [], //发现更多商品列表
            specGood: {}, //显示规格弹窗的数据
            goodId: '', // 点击购物车图标的商品gid
            brandShow: false, //推荐品牌下拉框
            activity: false,

            groupList: [],
            tableExit: false,
            tableUrl: 'http://iryoss3-0.oss-cn-beijing.aliyuncs.com/static/turntable-icon.gif',
            newBuyData: {
                is_tip: false
            } // 新人购
        };
    },
    computed: {
        referInfo() {
            let referInfo = {};
            let userInfo = this.$store.state.login.userInfo;
            if (this.isLogin) {
                referInfo.referid = userInfo.referrer;
                referInfo.refername = userInfo.referrername;
                referInfo.userid = userInfo.uid;
                if (userInfo.ouid != 0) {
                    referInfo.ouid = userInfo.ouid;
                }
            } else {
                if (this.$store.state.login.refer.referid) {
                    referInfo = this.$store.state.login.refer;
                } else {
                    referInfo.referid = '暂无';
                }
                referInfo.userid = '请登录';
            }
            return referInfo;
        },
        isLogin() {
            let userInfo = this.$store.state.login.userInfo;
            // console.log('loginlogin:', JSON.stringify(userInfo), userInfo.role);
            let login = false;
            if (JSON.stringify(userInfo) != '{}') {
                login = userInfo.role === undefined ? false : true;
                wx.miniProgram.postMessage({
                    data: {
                        system: this.$store.state.login.system,
                        referid: userInfo.uid,
                        title: '爱润妍' + userInfo.uid
                    }
                });
            }
            return login;
        }
    },
    methods: {
        ...mapActions(['addToCart']),
        toSearch() {
            this.$router.push({
                name: 'search'
            });
        },
        onTabClick(index) {
            this.active = index;
            if (this.zoneGoods[index - 1]) {
                this.zoneScroll(index);
            } else {
                window.scrollTo(0, 0);
            }
        },
        zoneScroll(index) {
            let id = 'id' + this.zoneGoods[index - 1].id;
            let anchor = document.getElementById(id);
            let rect = anchor.offsetTop - 30;
            // let rect= document.querySelector('#'+id).getBoundingClientRect().top - 30;
            let top = window.pageYOffset;
            console.log('top', top, 'rect', rect);
            let distance;
            let step = rect / 50;
            let that = this;
            if (top > rect) {
                distance = Math.floor(top - rect);
                step = distance / 50;
                smoothUp();
            } else {
                smoothDown();
            }

            function smoothDown() {
                if (top < rect) {
                    top += step;
                    window.scrollTo(0, top);
                    setTimeout(smoothDown, 10);
                } else {
                    window.scrollTo(0, rect);
                }
            }

            function smoothUp() {
                if (top > rect) {
                    top -= step;
                    window.scrollTo(0, top);
                    setTimeout(smoothUp, 10);
                } else {
                    window.scrollTo(0, rect);
                }
            }
        },
        //查看所有分组
        allRecTab() {
            this.popShow = !this.popShow;
        },
        toDetail(good) {
            console.log('toDetail', good);
            this.$router.push({
                name: 'online-detail',
                query: {
                    gid: good.gid
                }
            });
        },
        // 获取推荐品牌
        getRecBrand() {
            let refer = {};
            refer = this.referInfo;
            if (refer.referid == '暂无') {
                refer.referid = null;
            }
            this.request
                .get(API.frontGetBrand, {
                    referid: refer.referid
                })
                .then(res => {
                    console.log('frontGetSaleBrand', res);
                    this.$store.commit('setFrontBrand', res);
                    // this.brands = res;0530
                    //接口调用成功，数量+1， 调用是否隐藏loading
                    this.dataCount++;
                    this.hideLoading();
                })
                .catch(err => {
                    console.error('frontGetBrand-err', err);
                });
        },
        toOtherSystem(brand) {
            console.log('toOtherSystem', brand);
            // if (brand.isclick && this.isLogin) {
            if (brand.brand != 4) {
                let url = '';
                //    跳转系统
                this.$store.commit('setSystem', brand.system);
                if (brand.token.access_token) {
                    url = `https://${document.domain}/welcome?system=${brand.system}&token=${brand.token.access_token}&token_type=1&referid=${brand.referid}`;
                } else {
                    url = `https://${document.domain}/welcome?system=${brand.system}&referid=${brand.referid}`;
                }
                window.location.href = url;
                //目前使用
                // this.$router.push({
                //     name: 'welcome',
                //     query: {
                //         system: brand.system,
                //         token: brand.token.access_token,
                //         token_type: 1
                //     }
                // });
            } else {
                this.$toast('暂未开通');
            }
            // }
        },
        // 获取分组及其商品
        getRecZone() {
            this.request
                .get(API.frontGetSaleZone)
                .then(res => {
                    console.log('frontGetSaleZone', res);
                    this.banner = res.banner;
                    this.tagAll = res.tagAll;
                    if (window.__wxjs_environment === 'miniprogram' && dayjs().unix() < 1574302881) {
                        this.zoneGoods = res.showTags[0];
                    } else {
                        this.zoneGoods = res.showTags;
                    }
                    //接口调用成功，数量+1， 调用是否隐藏loading
                    this.dataCount++;
                    this.hideLoading();
                })
                .catch(err => {
                    console.error('frontGetSaleBrand-err', err);
                });
        },
        //获取发现更多商品列表
        getMoreList($state) {
            // console.log('getMoreList--');
            setTimeout(() => {
                this.request
                    .get(API.frontGetMoreList, {
                        page: this.pageIndex,
                        size: this.pageSize
                    })
                    .then(res => {
                        if (res.length) {
                            this.pageIndex += 1;
                            this.findMoreList.push(...res);
                            $state.loaded();
                        } else {
                            $state.complete();
                        }
                    })
                    .catch(err => {
                        console.error('frontGetMoreList-err', err);
                    });
            }, 1000);
        },
        getMoreGoods(zone) {
            if (zone == 0) {
                this.onTabClick(0);
            } else {
                this.$router.push({
                    name: 'zone-goods',
                    query: {
                        id: zone.id,
                        name: zone.name
                    }
                });
            }
        },
        toGroupShop() {
            this.$router.push({
                name: 'group-goods'
            });
        },
        toAddCart(good) {
            let that = this;
            this.specGood = {};
            if (good.status == 3) {
                this.request
                    .get(API.frontGetMiniGood, {
                        gid: good.gid
                    })
                    .then(res => {
                        console.log('frontGetMiniGood', res);
                        this.goodId = good.gid;
                        this.specGood = res;
                        this.specGood.pic = good.pic;
                        setTimeout(() => {
                            that.$refs.fspec.show();
                        }, 5);
                    })
                    .catch(err => {
                        console.error('frontGetMiniGood-err', err);
                    });
            } else {
                this.$toast('该商品暂不可操作');
            }
        },
        specChooseOk(sku) {
            sku.system = this.$store.state.login.system;
            sku.gid = this.goodId;
            if (sku.buyid) {
                if (this.isLogin) {
                    // 购物车添加商品（已注册）
                    this.request
                        .post(API.onlineAddCartGoods, {
                            gid: sku.gid,
                            buyid: sku.buyid,
                            num: sku.count
                        })
                        .then(res => {
                            console.log('onlineAddCartGoods', res);
                        })
                        .catch(err => {
                            console.error('onlineAddCartGoods-err', err);
                        });
                } else {
                    this.addToCart(sku);
                }
                this.$toast('加入购物车成功');
            }
        },
        hideLoading() {
            if (this.dataCount >= 2) {
                this.hideGlobaLoading();
            }
        },
        getGroupList() {
            this.request
                .get(API.getGroupShopGoods, {
                    page: 0,
                    size: 8
                })
                .then(res => {
                    console.log('getGroupShopGoods', res.length);
                    this.groupList.push(...res);
                })
                .catch(err => {
                    console.error('getGroupShopGoods-err', err);
                });
        },
        toGroupDetail(good) {
            this.$router.push({
                name: 'group-detail',
                query: {
                    gid: good.gid
                }
            });
        },
        groupBuy(good) {
            this.specGood = {};
            this.request
                .get(API.frontGetMiniGood, {
                    gid: good.gid
                })
                .then(res => {
                    console.log('frontGetMiniGood', res);
                    this.goodId = good.gid;
                    this.specGood = res;
                    setTimeout(() => {
                        // console.log('that.$refs',that.$refs)
                        this.$refs.gspec.show();
                    }, 5);
                })
                .catch(err => {
                    console.error('frontGetMiniGood-err', err);
                });
        },
        groupSpecChooseOk(sku) {
            console.log('SKUSKU', sku);
            sku.system = this.$store.state.login.system;
            sku.gid = this.goodId;
            if (this.isLogin) {
                if (sku.buyid) {
                    let requestArr = [];
                    let requestJson = {};
                    requestJson.buyid = sku.buyid;
                    requestJson.gid = sku.gid;
                    requestJson.num = sku.count;
                    // requestJson.sale = sku.sale;
                    requestArr.push(requestJson);
                    let orderData = {
                        data: requestArr,
                        type: 4,
                        groupid: '1'
                    };
                    console.log('requestJson', requestJson, requestArr);
                    console.log('skusku', sku);
                    this.$store.commit('dataCreateOrder', orderData);
                    this.$router.push({
                        name: 'order-created'
                    });
                }
            } else {
                this.$router.push({
                    name: 'login',
                    query: {
                        direct: 'order-created'
                    }
                });
            }
        },
        getTurntableExit() {
            this.request
                .get(API.getTurntableExit, {})
                .then(res => {
                    this.tableExit = res;
                })
                .catch(err => {
                    console.error('getTurntableExit-err', err);
                });
        },
        getNewBuy() {
            this.request
                .get(API.newBuy)
                .then(res => {
                    console.log(res, '111111111111111');
                    this.newBuyData = res;
                    // if (res.is_tip) {
                    //     this.newBuyData = res; // 图片
                    //     console.log(res, '222222222222');
                    // }
                })
                .catch(err => {});
        },
        toNewBuy() {
            if (this.newBuyData.target == 'detail') {
                // 跳转商品详情
                this.$router.push({
                    name: 'online-detail',
                    query: {
                        gid: this.newBuyData.tip
                    }
                });
            } else if (this.newBuyData.target == 'group') {
                this.$router.push({
                    name: 'zone-goods',
                    query: {
                        id: this.newBuyData.tip,
                        name: this.newBuyData.name
                    }
                });
            }
        },
        closeNewBuy() {
            this.newBuyData.is_tip = false;
        },
        toPart(part) {
            if (part.id) {
                this.$router.push({
                    name: 'partion-goods',
                    query: {
                        id: part.id
                    }
                });
            } else {
                this.toGroupShop();
            }
        }
        // jumpActicity() {
        //     console.log('111111111')
        //     //    跳转活动
        //     let sysAct = this.system.substr(0, 1)
        //     let zoneId = 0
        //     if (sysAct == '1') {
        //         zoneId = 39
        //     } else if (sysAct == '2') {
        //         zoneId = 40
        //     } else if (sysAct == '3') {
        //         zoneId = 41
        //     }
        //
        //     console.log('2222222222222')
        //     this.$router.push({
        //         name: 'zone-goods',
        //         query: {
        //             id: zoneId,
        //             name: '618活动',
        //         }
        //     })
        // }
    },
    watch: {},
    // beforeRouteEnter(to, from, next) {
    //     // 修复iOS版微信h5 History兼容性问题
    //     if (isIOS() && to.path !== location.pathname) {
    //         location.assign(to.fullPath); // 此处不可使用location.replace
    //     } else {
    //         next();
    //     }
    // },
    created() {
        // window.scrollTo(0, 0);
        if (window.__wxjs_environment === 'miniprogram') {
            //    小程序环境
            if (dayjs().unix() > 1574302881) {
                // 11- 8 - 18点以后
                //新人购
                this.getNewBuy();
                this.getRecBrand();
                this.getRecZone(); // 商品列表

                // 获取是否展示转盘
                this.getTurntableExit();
            } else {
                // console.log('想给审核人员看的');
                //新人购
                this.getNewBuy();
                this.getRecZone(); // 商品列表
                // 获取是否展示转盘
                this.getTurntableExit();
            }
        } else {
            //新人购
            this.getNewBuy();
            this.getRecBrand();
            this.getRecZone(); // 商品列表

            // 获取是否展示转盘
            this.getTurntableExit();
        }
    },
    mounted() {
        //新人购
        this.getNewBuy();
    }
    // activated() {
    //     this.getRecBrand();
    // }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~@/assets/main.styl';
 .bottom{
        flex-center();
        margin 20px 0;
        padding-bottom:20px
        a{
            font-size: 3.2vw
        }

    }
.table-icon {
    position: fixed;
    right: 0;
    bottom: vw(100);
    flex-y();
    word-vw(word12, gray6);

    img {
        width: vw(42);
        height: vw(42);
        border-radius: all-radius;
    }
}

.front {
    width: 100%;
    margin-bottom: vw(46);
    overflow-x: hidden;

    /* scroll-behavior:smooth; */
    /* -webkit-overflow-scrolling: touch; */
    .activity {
        .im-m {
            position: relative;
            width: 100%;

            .icon {
                position: absolute;
                right: 0;
                top: 0;
                padding: 10px;
                width: vw(20);
                height: vw(20);
            }

            img {
                width: 80vw;
                display: block;
            }
        }
    }
}

.rec-tabs {
    height: vw(30);
    width: 100%;
    background: grayF;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .rec-icon {
        flex-x(flex-end);
        position: absolute;
        right: cellPadding;
        line-height: vw(30);
        width: 30%;
        text-align: right;

        div {
            width: 38%;
        }

        .search {
            width: vw(18);
            height: vw(18);
            fill: main-color;
        }

        .down {
            width: vw(18);
            height: vw(18);
            fill: gray3;
        }
    }
}

.front-banner {
    margin-top: vw(30);
    height: vw(173);
}

.front-zhiyou {
    img {
        width: 100%;
    }
}

.front-rec-brand {
    width: vw(345);
    height: vw(59);
    margin-top: titleMargin;
    background-color: grayF;
    padding: vw(10) cellPadding;

    &.mall {
        margin-top: vw(1);
    }

    .brand-all {
        // height vw(91)
        display: flex;
        flex-direction: row;
    }

    .brand-more {
        display: flex;
        flex-direction: row;
        margin-top: middleMargin;
    }

    .brand-single {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        img {
            width: vw(40);
            height: vw(40);
            border-radius: vw(200);
        }

        .brand-name {
            margin-top: titleMargin;
            word-vw(word12, gray3);
            line-height: vw(16);
            text-align: center;
        }
    }
}

.zone-single {
    /* scroll-behavior:smooth; */
    /* -webkit-overflow-scrolling: touch; */
    .scroll-top {
        width: 100%;
        height: vw(30);
        background-color: grayF;
    }

    .tab-active {
        display: block;
    }

    .tab-active:target {
        padding-top: vw(50);
    }

    .no-active {
        display: none;
    }

    .zone-slide {
        width: vw(345);
        margin-top: smallMargin;
        background-color: grayF;
        padding: vw(10) cellPadding;
        height: vw(167);

        .slide-good {
            margin-top: smallMargin;
        }
    }

    .zone-list {
        .list-title {
            width: vw(345);
            margin-top: titleMargin;
            background-color: grayF;
            padding: cellPadding;
        }
    }

    .zone-pic-slide {
        margin-top: smallMargin;
        background-color: grayF;
        height: vw(347);
        width: 100%;

        .slide-pic {
            height: vw(190);

            img {
                width: 100%;
                height: vw(190);
            }
        }

        .pic-good {
            margin-top: smallMargin;
            margin-left: cellPadding;
        }
    }
}

.find-more {
    .list-title {
        width: vw(345);
        margin-top: titleMargin;
        background-color: grayF;
        padding: cellPadding;
    }
}

.no-more {
    word-vw(word12, gray9);
    flex-center();
    padding-bottom: 5vw;
    background-color: grayF;
    padding-top: vw(30);
}

>>> .van-tabs--line .van-tabs__wrap {
    height: vw(30);
    font-size: vw(14);
    margin-left: 0;
    /* border hotpink 1px solid */
}

>>> .van-tabs__line {
    background-color: main-color;
    margin-left: vw(5);
}

>>> .van-tab--active {
    color: main-color;
    flex-basis: auto;
}

>>> .van-tab {
    flex-basis: auto;
    padding-left: vw(15);
    line-height: vw(30);
    flex: none;
    width: auto;
    /* border hotpink 1px solid */
}

>>> .van-tab .van-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: unset;
}

>>> .van-tabs__wrap--scrollable .van-tab {
    flex: none;
    flex-basis: auto;
}

.group-goods {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
}

.group-good-single {
    width: vw(185);
    background-color: grayF;
    height: vw(245);
    margin-top: titleMargin;

    img {
        width: vw(185);
        height: vw(185);
    }
}

.good-name {
    padding: 0 smallMargin;
    margin-top: smallMargin;
    word-vw(word12, gray3);
    line-height: vw(16);
    text-align: left;
    ellipsis();
}

.good-desc {
    padding: 0 smallMargin;
    display: flex;
    justify-content: space-between;

    .pintuan-icon {
        svg {
            width: vw(25);
            height: vw(25);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: vw(2);
            fill: main-color;
        }
    }
}

.good-price {
    margin-top: smallMargin;
    word-vw(word12, main-color);
    line-height: vw(16);
    text-align: left;
    overflow: hidden;

    del {
        font-size: vw(10);
        color: gray9;
        line-height: vw(14);
        margin-left: smallMargin;
    }
}
</style>
